{% extends "base.html" %}
{% block javascript %}
<script>
    $(function () {
        $('#myModal').modal('hide')
    });
{#    $(document).ready(function() {#}
{#        $(".glyphicon-trash").click(function () {#}
{#            swal({#}
{#            title: "Are you sure?",#}
{#            text: "Your will not be able to recover this data!!",#}
{#            type: "warning",#}
{#            showCancelButton: true,#}
{#            confirmButtonColor: "#DD6B55",#}
{#            confirmButtonText: "Yes, delete it!",#}
{#            closeOnConfirm: false#}
{#            },#}
{#            function () {#}
{#                $(this).parents.parents.parent(".info").remove();#}
{#                var id=$(".glyphicon-trash").attr("value");#}
{#                $.post("../index",{'id':id });#}
{##}
{#                swal("Deleted!", "Your data has been deleted.", "success");#}
{#                swal("Sorry", "You Can't delete the data!", "error");#}
{#            });#}
{#        });#}
{#    });#}
</script>
{% endblock %}
{% block main %}
        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Tables
                        </h1>
                        <ol class="breadcrumb">
                            <li>
                                <i class="fa fa-dashboard"></i>  <a href="../index">Dashboard</a>
                            </li>
                            <li class="active">
                                <i class="fa fa-table"></i> Tables
                            </li>
                        </ol>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <h4 class="well">Contextual Classes</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover table-striped" style="height:10px;">
                                <thead>
                                    <tr class="success">
                                        <th class="col-lg-2" style="text-align: center">#</th>
                                        <th class="col-lg-2" style="text-align: center">姓名</th>
                                        <th class="col-lg-2" style="text-align: center">性别</th>
                                        <th class="col-lg-3" style="text-align: center">电话</th>
                                        <th class="col-lg-2" style="text-align: center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    {% for show in articlelist.object_list %}
                                        <tr class="info">
                                            <div>
                                                <td style="text-align: center">{{ show.id }}</td>
                                                <td style="text-align: center">{{ show.username }}</td>
                                                <td style="text-align: center">{{ show.sex }}</td>
                                                <td style="text-align: center">{{ show.phone }}</td>
                                                <td style="text-align: center;">
                                                    <a href="javascript:;" class="fa fa-edit"  data-toggle="modal" data-target="#myModal"></a>&nbsp;&nbsp;
                                                    <a class="glyphicon glyphicon-trash" href="{% url 'blued_delete' show.id %}"></a>
                                                </td>
                                            </div>
                                            <div class="modal fade" id="myModal" tabindex="0" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                            <h4 class="modal-title" id="myModalLabel">信息修改</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form class="form-horizontal">
                                                                <div class="control-group">
                                                                    <div>
                                                                        姓名:<input type="text" class="input-sm" style="width: 250px;" value="{{ show.username }}">
                                                                    </div>
                                                                </div>
                                                                <div><br></div>
                                                                <div class="control-group">
                                                                    <div class="controls">
                                                                        电话:<input type="text" class="input-sm" style="width: 250px;" value="{{ show.phone }}">
                                                                    </div>
                                                                </div>
                                                                <div><br></div>
                                                                <div>
                                                                    <label class="radio-inline">
                                                                      <input type="radio" name="myradio">男
                                                                    </label>
                                                                    <label class="radio-inline">
                                                                      <input type="radio" name="myradio">女
                                                                    </label>
                                                                </div>
                                                                <div><br></div>
                                                                <div class="control-group">
                                                                    <div class="controls">
                                                                      <button type="submit" class="btn btn-info" style="margin-left: 100px;">保存</button>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div><!-- /.modal-content -->
                                               </div><!-- /.modal-dialog -->
                                            </div><!-- /.modal -->
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            暂无用户
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="row col-lg-12" style="text-align: center">
                                <span class="step-links">
                                    <ul class="pager">
                                     {% if articlelist.has_previous %}
                                     <li class="prev">
                                         <a href="?page={{ articlelist.previous_page_number }}" class="previous">上一页</a>
                                     </li>
                                     {% endif %}
                                     第 {{ articlelist.number }}/{{ articlelist.paginator.num_pages }} 页
                                     {% if articlelist.has_next %}
                                         <li class="prev">
                                             <a href="?page={{ articlelist.next_page_number }}">下一页</a>
                                         </li>
                                     {% endif %}
                                        <li class="next"><a>共{{ row1.count }}条</a></li>
                                    </ul>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.row -->

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/sweet-alert.min.js"></script>
{#    <link rel="stylesheet" type="text/css" href="../static/css/sweet-alert.css">#}

    <!-- Bootstrap Core JavaScript -->
    <script src="../static/js/bootstrap.min.js"></script>
{% endblock %}

</body>

</html>
